<script lang="ts">
export default {
  name: "OperateMethodEntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
    ref="dataTableRef"
    v-loading="false"
    :data="dataState.entityList"
    border
    highlight-current-row
  >
    <!-- 展开列表 -->
    <el-table-column type="expand">
      <template #default="props">
        <el-input v-model="props.row.extendParam.description" :autosize="{ minRows: 3, maxRows: 100 }" :readonly="true"
                  type="textarea"/>
      </template>
    </el-table-column>

    <el-table-column align="center" type="selection" width="40"/>
    <el-table-column label="设备厂商" min-width="150" prop="iotName"/>
    <el-table-column label="子集名称" min-width="150" prop="subsetName"/>
      <el-table-column align="center" label="模板类型" prop="templateType" width="150">
      <template #default="scope">
        <el-tag v-if="scope.row.templateType === 'device-param'"  type="warning">设备</el-tag>
        <el-tag v-else-if="scope.row.templateType === 'channel-param' " type="primary">通道</el-tag>
        <el-tag v-else-if="scope.row.templateType === 'operate-param' " type="success">操作</el-tag>
        <el-tag v-else type="danger">未定义</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="模型数量" min-width="150" prop="count"/>

    <el-table-column align="center" label="操作" width="200">
      <template #default="scope">
         <el-button :icon="ArrowRight" circle plain type="primary" @click.stop="handleDetailPage(scope.row)"/>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页工具条 -->
  <pagination v-if="dataState.total > 0" v-model:limit="dataState.queryParams.pageSize"
              v-model:page="dataState.queryParams.pageNum" :total="dataState.total"
              @pagination="handleQuery"/>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from "vue";

import {ArrowRight} from '@element-plus/icons-vue';
import {
  listIotTemplateGroup,
} from "@/api/repo/comp/local";
import {
  RepoCompQueryParam,
  DeviceOperateQueryParam
} from "@/api/repo/comp/local/types";
import {useRouter} from "vue-router";

const emit = defineEmits(['rowClick', 'update', 'delete']);// 定义组件的事件通知
const router = useRouter();

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: true,
  // 选中ID数组
  ids: [],
  // 记录总数
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 组件ID
  compId: 0,
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
  // 实体数据
  entityList: [] as any[],
});

function handleDetailPage(row: any) {
  if (row.templateType == 'operate-param'){
    router.push('/repo-comp/local/iot-template/operate-list?compId=' + dataState.compId);
    return
  }
  if (row.templateType == 'device-param'){
    router.push('/repo-comp/local/iot-template/device-list?compId=' + dataState.compId);
    return
  }
}

function handleQuery() {
  emit('rowClick', {});

  dataState.loading = true;
  listIotTemplateGroup(dataState.compId).then(({data}) => {
    data.forEach(value => {
      let item = value;
      if (item.templateType == 'operate-param'){
        item.templateTypeName = '操作模板';
      }
      if (item.templateType == 'device-param'){
        item.templateTypeName = '设备模板';
      }
      if (item.templateType == 'channel-param'){
        item.templateTypeName = '通道模板';
      }

      dataState.entityList.push(item)
    });

    dataState.loading = false;
  });


}

/**
 * 刷新表单
 */
function refreshTable(queryParams: DeviceOperateQueryParam) {
  dataState.queryParams = queryParams;

  handleQuery();
}

function getUuidFromHref() {
  let tag = "/repo-comp/local/iot-template/model-list?compId=";
  let start = location.href.indexOf(tag);
  if (start <= 0) {
    return;
  }

  dataState.compId = Number.parseInt(location.href.substring(start + tag.length));
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  getUuidFromHref();

  // 查询实体数据
  handleQuery();
});

</script>
